import { postAction,putAction } from "@/utils/plugins/request.js";

export default {
    data() {
        return {
            detailUrl: "", // 获取详情地址
            editUrl: '', // 修改的url
            params: {}, // post 请求需要的地址参数
            form: {}, // 详情数据
            detailParams: {}, // 请求详情是携带的额外参数
            // 是否默认请求一次
            defaultRequest: true,
            // 表单的label 和 表单的栅格比例
            labelCol: { span: 6 },
            wrapperCol: { span: 14},
            spinning:false, // 加载状态
        }
    },
    mounted() {
        if(this.defaultRequest){
            this.getDetail();
        }
    },
    methods: {
        /**
         * 获取详情数据请求
         */
        getDetail() {
            this.spinning = true;
            postAction(this.detailUrl, this.detailParams).then(res => {
                this.form = this.detailFormatData(res)
                this.spinning = false;
            })
        },
        /**
         * 格式化详情返回的数据
         * @param res 请求返回的数据
         * @returns {*}
         */
        detailFormatData(res) {
            console.log(res.data);
            return res.data
        },

        /**
     * 重置表单数据
     * @param formName  el-form 的组件名称 ref=""
     */
    reset(formName) {
        this.$refs[formName].resetFields();
      },
      /**
       * 提交表单 里面分为 验证表单数据和保存表单数据
       * @param formName  el-form 的组件名称 ref=""
       */
      submit(formName) {
        this.validate(formName).then(() => {
          this.save(formName);
        });
      },
      /**
       * 数据验证
       */
      extraValidate(resolve) {
        resolve();
      },
      /**
       * 保存表单数据
       */
      save(formName) {
        this.spinning = true
        putAction(this.editUrl, this.formatData(), this.params).then((res) => {
          this.$notification['success']({
            message: res.message
          })
          this.$emit("load-data");
          this.$emit("close");
          this.spinning = false;
        }).catch(err=>{
          this.spinning = false;
        });
      },
      /**
       * 表单验证
       * @param formName el-form 的组件名称 ref=""
       */
      validate(formName) {
        return new Promise((resolve, inject) => {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              /**
               * 判断是否有额外的验证器
               * 是：执行额外验证器的函数
               * 否:验证成功
               */
              if (this.extraValidate) {
                this.extraValidate(resolve, inject);
                return;
              }
              resolve();
              return;
            }
            inject();
          });
        });
      },
      /**
       * 必须重写的方法
       * @returns 如果有this.form则返回 否则是空对象
       */
      formatData() {
        return this.form || {};
      },
        /**
         * 关闭弹窗
         */
        close(){
            this.$emit('close')
        }
    }
}